<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="./lib/vue-2.6.10/dist/vue.js"></script>
		<script src="./lib/vue-router.js"></script>
		<style>
			.header {
				background-color: orange;
				height: 80px;
			}
			.container {
				display: flex;
				height: 600px;
			}
			.left {
				background-color: lightgreen;
				flex: 2;
			}
			.right {
				background-color: lightcoral;
				flex: 7;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
			<div class="container">
				<router-view name="left"></router-view>
				<router-view name="right"></router-view>
			</div>
		</div>
		<script>
			var header = {
				template: '<h1 class="header">Header top area</h1>'
			};
			var leftBox = {
				template: '<h1 class="left">Left side area</h1>'
			};
			var rightBox = {
				template: '<h1 class="right">Right Content area</h1>'
			};
			var router = new VueRouter({
				routes: [
					{
						path: "/",
						components: {
							default: header,
							left: leftBox,
							right: rightBox
						}
					}
				]
			});
			var vm = new Vue({
				el: "#app",
				data: {},
				methods: {},
				router
			});
		</script>
	</body>
</html>
